<template>
    <div style="width:50%;"  v-show="ifShow">
        <div id="closeButton">
            <i class="el-icon-close" @click="closeTable" style="float: right;margin: 1.8% 0.5% 0 0;" > </i>
        </div>
        <!--<el-drawer :visible.sync="tableDialogVisible" direction="ttb" :before-close="handleClose" style="width: 50%; background-color: #FFFFFF" modal="false" >-->
        <el-collapse  style="width: 100%; background-color: #FFFFFF" id="spatialQuery">

            <el-collapse-item title="空间查询结果">
                <el-table :data="queryData" height="250px" @row-click="showFeature" style="overflow: auto">
                    <el-table-column
                    type="index"
                    width="50px">
                    </el-table-column>
                    <el-table-column
                            label="定位"
                            width="50"
                            align="center"
                   >
                        <template slot-scope="scope">
                            <i @click="toPosition(scope.row)" class="el-icon-aim" ></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                            v-for="item in headers"
                            v-if="item!='docId'"
                            :property="item"
                            :label="item"
                            :key="item">
                    </el-table-column>

                </el-table>
            </el-collapse-item>
        </el-collapse>
    </div>
    <!--</el-drawer>-->
</template>

<script>
    import {booleanPointInPolygon, bbox, point, polygon} from '../../static/js/turf.min'
    export default {
        name: "spatialQueryDialog",
        data() {
            return {
                queryData: [],
                headers: [],
                // tableDialogVisible: false,
                ifShow:false
            };
        },
        components: {},
        methods: {
            toPosition(row){
                let feature = JSON.parse(row.geom);
                let bbpolygon= polygon(feature.features[0].geometry.coordinates[0]);
                let box= bbox(bbpolygon);
                this.$globalConstant.map.fitBounds(box);
            },
            closeTable(){
                this.ifShow=false;

            },
            getDataName(scope, items) {
                return scope[items]
            },
            handleClose(done) {
                this.$confirm("确认关闭？").then(_ => {
                    done();
                }).catch(_ => {
                })
            },
            showFeature(row) {
                if (this.$globalConstant.map.getLayer("temp")) {
                    this.$globalConstant.map.removeLayer('temp');
                    this.$globalConstant.map.removeSource('temp');
                }
                let feature = JSON.parse(row.geom);
                let layerIndex = '';
                for (let i = 0; i < this.$globalConstant.map.style._order.length; i++) {
                    if (this.$globalConstant.map.style._order[i].substring(0, 2).indexOf('gl') !== -1) {
                        layerIndex = this.$globalConstant.map.style._order[i];
                        break
                    }
                }
                this.$globalConstant.map.addLayer({
                    "id": 'temp',
                    "source": {
                        "type": "geojson",
                        "data": feature.features[0]
                    },
                    "type": "fill",
                    "paint": {
                        "fill-color": "red"
                    }
                }, layerIndex);
                console.log(feature.features[0].geometry.coordinates[0]);
                console.log([[feature.features[0].geometry.coordinates[0]]])

                // console.log(this.$globalConstant.map.getStyle().layers[0].id);
                // console.log(this.$globalConstant.map.getStyle().layers[1].id);
                // console.log(this.$globalConstant.map.getStyle().layers[2].id);
                // console.log(this.$globalConstant.map.getStyle().layers[3].id);
                // console.log(this.$globalConstant.map.getStyle().layers);
            }
        },
        created() {
            let that = this;
            this.$Bus.$on('showTableDialog', (visible, data) => {
                that.headers = [];
                // that.tableDialogVisible = visible;
                that.ifShow=visible;
                that.queryData = data;
                if (data.length !== 0) {
                    for (let i = 0; i < Object.keys(data[0]).length; i++) {
                        if (Object.keys(data[0])[i] !== 'geom') {
                            that.headers.push(Object.keys(data[0])[i]);
                        }
                    }
                }
            });
            this.$Bus.$on("closeTableDialog",closeTableDialog=>{
                    this.queryData=closeTableDialog;

            })
        }
    }
</script>

<style scoped>
    .el-collapse-item__header {
        margin-left: 30px;
    }
    #closeButton :hover{
        color: red;
        cursor:pointer
    }
    .el-icon-aim{
        color: green;
        cursor:pointer
    }
</style>